<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      姓名：<input type="text" v-model="form.username" /><br />
      年龄：<input type="text" v-model="form.userage" /> <br />
      性别：<select v-model="form.sex">
        <option value="0">女</option>
        <option value="1">男</option>
      </select>
      <br />
      <button @click="change">添加/修改</button>
      <table>
        <thead>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </thead>
        <tbody v-for="(item,i) in arr" :key="item.id">
          <td>{{i+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender==1?'男':'女'}}</td>
          <td>
            <button @click="del(item.id)">删除</button
            ><button @click="bianji(item.id)">编辑</button>
          </td>
        </tbody>
      </table>
    </div>
    <style>
      table {
        border-collapse: collapse;
      }
      th {
        border: 2px solid black;
        width: 50px;
        height: 50px;
        text-align: center;
        font-weight: 900;
      }
      td {
        border: 2px solid black;
        width: 90px;
        height: 50px;
        text-align: center;
      }
    </style>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          arr: [
            { id: 1, age: 34, name: "小沈阳", gender: 1 },
            { id: 2, age: 43, name: "沈腾", gender: 1 },
            { id: 3, age: 18, name: "杨幂", gender: 0 },
          ],
          form: {
            id: 0,
            username: "",
            userage: "",
            sex: 0,
          },
          flag: "add",
        },
        methods: {
          change() {
            if (this.form.username.trim() === "") return alert("不能为空")
            if (this.flag === "add") {
              this.arr.push({
                id: Math.random(),
                name: this.form.username,
                age: this.form.userage,
                gender: this.form.sex,
              })
              alert("添加数据成功")
              this.form.username = ""
              this.form.userage = ""
              this.form.sex = 0
            } else {
              console.log(this.form.id)
              let i = this.arr.findIndex((item) => item.id === this.form.id)
              let obj = this.arr.find((item) => item.id === this.form.id)
              obj.id = this.form.id
              obj.name = this.form.username
              obj.age = this.form.userage
              obj.gender = this.form.sex
              console.log(obj)
              alert("修改用户数据成功！")
            }

            this.type = "add"
          },
          del(id) {
            this.arr = this.arr.filter((item) => {
              return item.id !== id
            })
          },
          bianji(id) {
            console.log(id)
            this.arr.map((item) => {
              if (item.id === id) {
                this.form.username = item.name
                this.form.userage = item.age
                this.form.sex = item.gender
                this.form.id = id
                this.flag = "bianji"
              }
            })
          },
        },
      })
    </script>
  </body>
</html>